<template>
    <view>
        <!-- 底部弹出层 -->
        <view v-if="showUsePicker" class="picker-container">
            <view class="picker-mask" @click="closeOutPicker"></view>
            <view class="picker-content">
                <view class="picker-header">
                    <text class="picker-cancel" @click="closeOutPicker">取消</text>
                    <text class="picker-title">领用</text>
                    <text class="picker-confirm" @click="confirmUse">确定</text>
                </view>
                <!-- 表单 -->
                <view class="form-list">
                    <uv-form labelPosition="left" :model="form" :rules="rules" ref="form">
                        <uv-form-item labelWidth="100" label="施工合同" prop="form.contract" borderBottom
                            @click="showContractSelect">
                            <uv-input v-model="form.contract" disabled disabledColor="#ffffff" placeholder="请选择施工合同"
                                border="none">
                            </uv-input>
                            <template v-slot:right>
                                <uv-icon name="arrow-right"></uv-icon>
                            </template>
                        </uv-form-item>
                        <uv-form-item labelWidth="100" label="计量周期" prop="form.cycle" borderBottom
                            @click="showCycleSelect">
                            <uv-input v-model="form.cycle" disabled disabledColor="#ffffff" placeholder="请选择计量周期"
                                border="none">
                            </uv-input>
                            <template v-slot:right>
                                <uv-icon name="arrow-right"></uv-icon>
                            </template>
                        </uv-form-item>
						<!-- <uv-form-item labelWidth="100" label="材料单价" prop="form.cycle" borderBottom
						    @click="showmaterialSelect">
						    <uv-input v-model="form.cycle" disabled disabledColor="#ffffff" placeholder="请选择材料单价"
						        border="none">
						    </uv-input>
						    <template v-slot:right>
						        <uv-icon name="arrow-right"></uv-icon>
						    </template>
						</uv-form-item> -->
                        <uv-form-item labelWidth="100" label="领用数量" prop="form.lnum" borderBottom>
                            <uv-input v-model="form.lnum" border="none" type="number" min="0" placeholder="请输入领用数量">
                            </uv-input>
                        </uv-form-item>
                        <uv-form-item labelWidth="100" label="领用单价" prop="form.drawUnitPrice" borderBottom>
                            <uv-input v-model="form.drawUnitPrice" border="none" type="number" min="0"
                                placeholder="请输入领用单价">
                            </uv-input>
                        </uv-form-item>
						
                    </uv-form>
                    <scroll-view scroll-y class="list scroll-list">
                        <uv-action-sheet ref="contractSelect" :actions="contractList" title="请选择"
                            @select="contractSelect" class="list-item">
                        </uv-action-sheet>
                    </scroll-view>
                    <uv-action-sheet ref="cycleSelect" :actions="cycleList" title="请选择" @select="cycleSelect">
                    </uv-action-sheet>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { number } from '../../uni_modules/uv-ui-tools/libs/function/test';
import {
    getContractList,
    getCyclemanagementList,
	materialProjectSingle
} from '@/utils/app.js'
export default {
    props: {
        queryParams: {
            type: Object,
            default: () => { }
        },
        materialList: {
            type: Array,
            default: () => []
        },
		useIndexId:{
			type:Number,
			default:0
		}
    },
    data() {
        return {
            form: {
                lnum: '',
                contract: '',
                cycle: '',
                projectId: ''
            },
            showUsePicker: false,
            contractList: [],
            cycleList: [],
            rules: {
                'form.sex': {
                    type: 'string',
                    max: 1,
                    required: true,
                    message: '请选择男或女',
                    trigger: ['blur', 'change']
                },
            },
            addNum: 0,
        }
    },
    watch: {
        'form.lnum': {
            handler(newVal, oldVal) {
                if (newVal > this.addNum) {
                    uni.showToast({
                        title: '领用数量不能大于库存数量',
                        icon: 'none'
                    });
                }

            },
            immediate: true,
            deep: true
        },
        //监听showUsePicker 是否为true
        'showUsePicker': {
            handler(newVal) {
                if (newVal) {
                    this.contractList = [];
                    this.cycleList = [];
                    this.form = {
                        lnum: '',
                        contract: '',
                        cycle: '',
                    };
                }
            }
        }
    },
    computed: {

    },
    methods: {
        onPullDownRefresh() {
            this.getContractData(this.queryParams)
        },
        //获取合同列表
        getContractData(data) {
            let params = {
                projectId: data.projectId,
            }
            getContractList(params).then(res => {
                if (res && res.code == 200) {
                    res.rows = res.rows.filter(item => item.parentId != 0);
                    this.contractList = res.rows.map(item => ({
                        name: item.contractName,
                        id: item.id,
                        type: item.type,
                        projectId: data.projectId
                    }));
                }
            })
        },
        //获取周期列表 
        getCyclemanagementData(data) {
            getCyclemanagementList(data).then(res => {
                if (res && res.code == 200) {
                    this.cycleList = res.rows.map(item => ({
                        name: item.cycleName,
                        id: item.id
                    }));

                }
            })
        },
		// 材料单价
		showmaterialSelect(){
			materialProjectSingle({materialProjectId:this.useIndexId,klyNum:1}).then(res=>{
				console.log(res);
			})
		},
        showContractSelect() {
            this.$refs.contractSelect.open();
            this.hideKeyboard();
        },
        showCycleSelect() {
            this.$refs.cycleSelect.open();
            this.hideKeyboard();
        },
        //合同选择
        contractSelect(e) {
            if (e) {
                this.form.contract = e.name;
                this.form.contractId = e.id;
                this.form.projectId = e.projectId;
                this.form.type = e.type;
                let params = {
                    projectId: this.queryParams.projectId,
                    contractId: e.id
                }
                this.getCyclemanagementData(params);
            }
        },
        //计量周期选择
        cycleSelect(e) {

            this.form.cycle = e.name;
            this.form.cycleId = e.id;
            // 对部分表单字段进行校验
            this.$refs.form.validateField('userInfo.sex', err => {
                // 处理错误后的逻辑
            })
        },
        hideKeyboard() {
            uni.hideKeyboard()
        },
        //初始弹窗
        openUsePicker(item) {
            this.addNum = item.num;
            this.getContractData(this.queryParams);
            this.showUsePicker = true;
        },
        closeOutPicker() {
            this.showUsePicker = false;
        },
        //确定
        confirmUse() {
            this.$emit('confirmUse', this.form);
            this.showUsePicker = false;
        }
    }
}
</script>

<style lang="scss" scoped>
	
	// .list{
	// 	height: 600rpx;
	// }
	.scroll-list{
		height: 600rpx;
	}
.picker-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
}

.picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.picker-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    padding: 20px 16px 32px 16px;
    min-height: 220rpx;
}

.picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    position: relative;
}

.picker-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
    color: #222;
    font-size: 18px;
}

.picker-cancel {
    color: #888;
    z-index: 1;
}

.picker-confirm {
    color: #2979ff;
    z-index: 1;
}

.form-list {
    padding: 10px 0 0 0;
}

.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.form-label {
    width: 120rpx;
    font-size: 15px;
    color: #333;
}

.form-input {
    flex: 1;
    font-size: 15px;
    color: #333;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 12px;
    margin-left: 12px;
    background: #fafbfc;
}
</style>